<template>
    <div>
        <h4 class="font-weight-bold">
        <span class="text-muted font-weight-light">事件消息 /</span> 系统事件
    </h4>
    <b-card class="mb-4">
        <div class="card-content">
            <Table :data="table.data" :columns="table.columns"  :loading="table.loading"  stripe border class="mt-2"></Table>
            <Page show-elevator show-total size="small" class="mt-2" 
            :total="table.total" 
            :page-size="table.pageSize"  
            :current="table.currentPage" @on-change="(pageNum) => {
                            let self = this;
                            table.pageChange.call(self,pageNum);
                        }"></Page>
        </div>
    </b-card>
    </div>
</template>

<style src="@/vendor/libs/sweet-modal-vue/sweet-modal-vue.scss" lang="scss"></style>

<script>
import Vue from "vue";
import { SweetModal, SweetModalTab } from "sweet-modal-vue";

function padLeftZero(str) {
    return ("00" + str).substr(str.length);
}

function formatDate(longStr, fmt) {
    let date = new Date(longStr);

    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
            RegExp.$1,
            (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
    }
    let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + "";
            fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length === 1 ? str : padLeftZero(str)
            );
        }
    }
    return fmt;
}

export default {
    name: "tables-vue-tables-2",
    metaInfo: {
        title: "Vue Tables 2 - Tables"
    },
    components: {
        SweetModal,
        SweetModalTab
    },
    data() {
        return {
            eventOid: "",
            table: {
                data: [],
                columns: [
                    {
                        title: "事件来源",
                        key: "messageSource",
                        width: 160,
                        render: (h, params) => {
                            let msgSourceName;
                            if (params.row.messageSource == "alertRule") {
                                msgSourceName = "预警规则("+ params.row.messageSourceName +")";
                            } else if (
                                params.row.messageSource == "scoreCard"
                            ) {
                                msgSourceName = "打分卡("+ params.row.messageSourceName +")";
                            }
                            return <div>{msgSourceName}</div>;
                        }
                    },
                    {
                        title: "风控对象类型",
                        key: "objectType",
                        render: (h, params) => {
                            let objectTypeName;
                            if (params.row.objectType == "customer") {
                                objectTypeName = "企业客户";
                            }
                            return <div>{objectTypeName}</div>;
                        }
                    },
                    {
                        title: "风控对象",
                        key: "objectName"
                    },
                    {
                        title: "事件名称",
                        key: "message",
                        width: 240
                    },
                    {
                        title: "最近更新时间",
                        width: 150,
                        key: "createDate",
                        render: (h, params) => {
                            // console.log(params);
                            let fmtDate = formatDate(
                                params.row.createDate,
                                "yyyy-MM-dd hh:mm:ss"
                            );
                            return <div>{fmtDate}</div>;
                        }
                    },
                    {
                        title: "操作",
                        key: "name",
                        width: 180,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;
                            return (
                                <div>
                                    <i-button
                                        type="text"
                                        size="small"
                                        class="mr-2"
                                        shape="circle"
                                        icon="document-text"
                                        onClick={() => {
                                            return vm.viewResult(params);
                                        }}
                                    />
                                </div>
                            );
                        }
                    }
                ]
            },
            defaultModalSize: null
        };
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, "yyyy-MM-dd");
        }
    },
    created() {
        let self = this;
        self.eventOid = this.$route.query.oid;
    },
    mounted() {
        let self = this;
        //加载客户列表
        self.loadTable().then(function(res) {
            // console.log(res);
            if (res.data) {
                self.table.data = res.data.data ? res.data.data : [];
            }
        });
    },
    methods: {
        loadTable() {
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve, reject) {
                self.$http
                    .get("/app/v1/sysEvents", {
                        params: {
                            pageSize: self.table.pageSize,
                            currentPage: self.table.currentPage,
                            eventOid: self.eventOid
                        }
                    })
                    .then(
                        function(res) {
                            self.table.total = res.data.recordCount;
                            self.table.loading = false;
                            resolve(res);
                        },
                        function(res) {
                            self.table.loading = false;
                            reject(res);
                        }
                    );
            });
        },
        viewResult: function(params) {
            let self = this;
            console.log(params);
            // self.$router.push({
            //     path: "/eventMessage/eventDetail",
            //     query: {
            //         oid: params.row.oid
            //     }
            // });
        }
    }
};
</script>
